<template>
  <el-container class="home">
    <el-main>

      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="24">
          <el-card class="update-log">
            <div slot="header" class="clearfix">
              <span>数据看板</span>
              <span style="float: right;margin-right: 10px;">
                统计截止时间 {{ assetsIndex.record_date }}
                <el-tooltip class="My_tooltip_46a6ff" placement="top">
                    <div slot="content">

                    </div>
                    <i class="el-icon-question"></i>
                  </el-tooltip>
               <!-- <el-button type="primary" style="margin-left: 10px;" size="mini" @click="loadIndex">刷 新</el-button>-->
              </span>
            </div>
            <div class="body">
              <el-row :gutter="10" class="my_panel-group">
                <el-col :xs="24" :sm="8" :md="6" :lg="6" class="card-panel-col" >
                  <div class="card-panel">



                      <div class="card-panel">
                        <div class="card-panel-icon-wrapper icon-simCard">
                          <svg-icon icon-class="cardShip" class-name="card-panel-icon"/>
                        </div>
                        <div class="card-panel-description">
                          <div class="card-panel-text">
                            待发货
                          </div>
                          <div class="card-panel-text">
                                <span class="card-panel-text-font">
                                  <count-to :start-val="0" :end-val="assetsIndex.tobe_shipped" :duration="1500"
                                            class="card-panel-num"/>
                                </span> 件
                          </div>
                        </div>
                      </div>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="8" :md="6" :lg="6" class="card-panel-col"
                        v-hasPermi="['yunze:index:overdoseCount']">
                  <div class="card-panel">

                      <div class="card-panel-icon-wrapper icon-upwardTrend">
                        <svg-icon icon-class="pendingReceipt" class-name="card-panel-icon"/>
                      </div>
                      <div class="card-panel-description">
                        <div class="card-panel-text">
                          快递未收
                        </div>
                        <div class="card-panel-text">
                            <span class="card-panel-text-font">
                              <count-to :start-val="0" :end-val="assetsIndex.expressnotreceived" :duration="1500"
                                        class="card-panel-num"/>
                            </span> 件
                        </div>
                      </div>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="8" :md="6" :lg="6" class="card-panel-col"
                        v-hasPermi="['yunze:index:expiringSoonCount']">
                  <div class="card-panel">

                      <div class="card-panel-icon-wrapper icon-used">
                        <svg-icon icon-class="notPaid" class-name="card-panel-icon"/>
                      </div>
                      <div class="card-panel-description">
                        <div class="card-panel-text">
                          未到款
                        </div>
                        <div class="card-panel-text">
                            <span class="card-panel-text-font">
                              <count-to :start-val="0" :end-val="assetsIndex.outstandingpayment" :duration="1500"
                                        class="card-panel-num"/>
                            </span> 元
                        </div>
                      </div>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="8" :md="6" :lg="6" class="card-panel-col"
                        v-hasPermi="['yunze:index:thresholdReachedCount']">
                  <div class="card-panel">
                    <router-link v-if="status_ShowId_show"
                                 :to="'/card/card/'+ tools.encrypt(JSON.stringify(assetsIndex.requestMap))">
                      <div class="card-panel-icon-wrapper icon-Proportion">
                        <svg-icon icon-class="finalPayment" class-name="card-panel-icon"/>
                      </div>
                      <div class="card-panel-description">
                        <div class="card-panel-text">
                          有尾款
                        </div>
                        <div class="card-panel-text">
                              <span class="card-panel-text-font">
                                <count-to :start-val="0" :end-val="assetsIndex.have_Tailfunds" :duration="1500"
                                          class="card-panel-num"/>
                              </span> 元
                        </div>
                      </div>
                    </router-link>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!--数据面板 end-->
      <el-divider/>
      <el-col :xs="48" :sm="48" :md="40" :lg="40">
        <el-card class="update-log">
          <div class="body">
            <el-tabs tab-position="right" ref="echarts" v-model="activeName" @tab-click="handleClick" >
              <el-tab-pane label="各类商品占比" lazy name="voice" v-if="commodityM_P_show">
              <el-row :gutter="10">
                <el-col :xs="14" :sm="14" :md="12" :lg="12" >
                  <el-card class="update-log">
                  <div slot="header" class="clearfix">
                    <span>月度商品占比</span>
                  </div>
                  <div class="body">
                    <pie-chart className="commodityM" width="100%" height="550px" v-if="commodityM_P_show"
                               :P_legend="commodityM_P_legend" :P_series="commodityM_P_series"
                               :P_color="commodityM_P_color"
                    />
                  </div>
                  </el-card>
                </el-col>

                <el-col :xs="14" :sm="14" :md="12" :lg="12" >
                  <el-card class="update-log">
                    <div slot="header" class="clearfix">
                      <span>年度商品占比</span>
                    </div>
                  <div class="body">
                    <pie-chart className="commodityY" width="100%" height="550px" v-if="commodityY_show"
                               :P_legend="commodityY_P_legend" :P_series="commodityY_P_series"
                               :P_color="commodityY_P_color"
                    />
                  </div>
                  </el-card>
                </el-col>
              </el-row>
              </el-tab-pane>

              <el-tab-pane label="商品批次占比" lazy name="ShortMessage" v-if="batchY_P_show" >
                <el-row :gutter="10">
                  <el-col :xs="14" :sm="14" :md="12" :lg="12">
                    <el-card class="update-log">
                      <div slot="header" class="clearfix">
                        <span>月入库批次占比</span>
                      </div>
                      <div class="body" >
                        <pie-chart className="batchM" width="100%" height="550px" v-if="batchM_P_show"
                                   :P_legend="batchM_P_legend" :P_series="batchM_P_series"
                                   :P_color="batchM_P_color"
                        />
                      </div>
                    </el-card>
                  </el-col>

                  <el-col :xs="16" :sm="16" :md="12" :lg="12" >
                    <el-card class="update-log">
                      <div slot="header" class="clearfix">
                        <span>年度入库批次占比</span>
                      </div>
                      <div class="body" >
                        <pie-chart className="batchY" width="100%" height="550px" v-if="batchY_P_show"
                                   :P_legend="batchY_P_legend" :P_series="batchY_P_series"
                                   :P_color="batchY_P_color"
                        />
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </el-tab-pane>

              <el-tab-pane label="合同金额趋势" lazy name="contractMoney" v-if="contract_show">
                <el-col :xs="32" :sm="32" :md="24" :lg="24" >
                  <el-card class="update-log">
                    <div slot="header" class="clearfix">
                      <span>合同金额增长</span>
                    </div>
                    <el-switch
                      style="display: block;text-align: right;"
                      v-model="contractType"
                      active-color="#1682e6"
                      @change="changeContractChart"
                      inactive-color="#13ce66"
                      active-text="月"
                      inactive-text="日">
                    </el-switch>
                    <line-chart className="contract" width="100%" height="550px" v-if="contract_show"
                                :chart-data="contractArr" :P_xAxis="contract_xAxis" :P_ShowLable="contract_ShowLable"
                                :P_colorArr="contract_colorArr"
                                :contract_config="contract_config"/>
                  </el-card>
                </el-col>
              </el-tab-pane>

              <el-tab-pane label="签收发货状态" lazy name="expressMoney"  v-if="shipment_status_P_show">
                <el-row :gutter="10">
                  <el-col :xs="14" :sm="14" :md="12" :lg="12">
                    <el-card class="update-log">
                      <div slot="header" class="clearfix">
                        <span>当月签收状态占比</span>
                      </div>
                      <div class="body">
                        <pie-chart className="signfor_expressdelivery" width="100%" height="550px" v-if="signfor_expressdelivery_P_show"
                                   :P_legend="signfor_expressdelivery_P_legend" :P_series="signfor_expressdelivery_P_series"
                                   :P_color="signfor_expressdelivery_P_color"
                        />
                      </div>
                    </el-card>
                  </el-col>

                  <el-col :xs="16" :sm="16" :md="12" :lg="12" >
                    <el-card class="update-log">
                      <div slot="header" class="clearfix">
                        <span>当月发货状态占比</span>
                      </div>
                      <div class="body">
                        <pie-chart className="shipment_status" width="100%" height="550px" v-if="shipment_status_P_show"
                                   :P_legend="shipment_status_P_legend" :P_series="shipment_status_P_series"
                                   :P_color="shipment_status_P_color"
                        />
                      </div>
                    </el-card>
                  </el-col>

                </el-row>
              </el-tab-pane>

              <el-tab-pane label="客户合同占比" lazy name="sumOfMoney" v-if="amountofmoneylineY_P_show">
                  <el-row :gutter="10">
                    <el-col :xs="14" :sm="14" :md="12" :lg="12">
                      <el-card class="update-log">
                        <div slot="header" class="clearfix">
                          <span>月度客户消费占比</span>
                        </div>
                        <div class="body" >
                          <pie-chart className="amountofmoneylineM" width="100%" height="550px" v-if="amountofmoneylineM_P_show"
                                     :P_legend="amountofmoneylineM_P_legend" :P_series="amountofmoneylineM_P_series"
                                     :P_color="amountofmoneylineM_P_color"
                          />
                        </div>
                      </el-card>
                    </el-col>

                      <el-col :xs="16" :sm="16" :md="12" :lg="12" >
                        <el-card class="update-log">
                          <div slot="header" class="clearfix">
                            <span>年度客户消费占比</span>
                          </div>

                          <pie-chart className="amountofmoneylineY" width="100%" height="550px" v-if="amountofmoneylineY_P_show"
                                     :P_legend="amountofmoneylineY_P_legend" :P_series="amountofmoneylineY_P_series"
                                     :P_color="amountofmoneylineY_P_color"
                          />

                        </el-card>
                      </el-col>
                  </el-row>
              </el-tab-pane>

              <el-tab-pane label="商品入库趋势" lazy name="Warehousing" v-if="contract_show">
                <el-row :gutter="10">
                  <el-col :xs="24" :sm="24" :md="24" :lg="24">
                    <el-card class="update-log">
                      <div slot="header" class="clearfix">
                        <span>增长趋势</span>
                      </div>
                      <div class="body" >
                        <line-chart className="warehousingline" width="100%" height="550px" v-if="warehousingline_show"
                                    :chart-data="warehousinglineArr" :P_xAxis="warehousingline_xAxis" :P_ShowLable="warehousingline_ShowLable"
                                    :P_colorArr="warehousingline_colorArr"
                                    :warehousingline_config="warehousingline_config"/>
                      </div>
                    </el-card>
                  </el-col>
                  </el-row>
              </el-tab-pane>


            </el-tabs>
          </div>
        </el-card>
      </el-col>

    </el-main>



  </el-container>
</template>

<script>
import {AssetDetails} from "@/api/yunze/system/index";
import tools from "@/utils/yunze/tools";
import LineChart from './dashboard/LineChart'
import PieChart from './dashboard/PieChart'
import CountTo from 'vue-count-to'

export default {
  name: "index",
  components: {
    PieChart,
    LineChart,
    CountTo,
  },
  created() {

    //不点击刷新按钮时获取的第一次缓存的数据
    if (window['IoTLink-assetsData'] != undefined && window['IoTLink-assetsData'] != null) {
      this.assetsIndex = window['IoTLink-assetsData'];
      this.status_ShowId_show = false;
      this.Myload();
    } else {
      this.loadIndex();//加载首页
    }

    this.contract_ShowLable = {Day_contractArr: "月度合同金额", Month_contractArr: "年度合同金额"};
    this.contract_config = {"smooth": false, 'areaStyle_show': "true"};
  },
  data() {
    return {
      loading: true,
      activeName: 'voice',
      allowloading: true,//是否允许加载
      loadingOnelinCount: true,//是否 已经加载在线人数
      quickEntryShow: false,//快捷入口 是否显示

      //折线图参数
      indexpage: {
        businessVolumeFlow: {
          Day_contractMap: {
            Day_contractArr: [],
          },
          Day_contract_xAxis: [],
          Day_cardFlowList: [
            {
              iccid: '',
              used: '',
              vid: '',
            }
          ],
        },
      },

      //饼状图参数
      assetsIndex: {
        requestMap:{ // 参数

        },
        PieChartBatch: { //本月批次
          data: [],
        },
        PieChartYear: {  //本年批次
          data: [],
        },
        commodityMonth: { //本月商品
          data: [],
        },
        commodityYear: {  //本年商品
          data: [],
        },
        StatisticsPr: {   //金额占比
          data: [],
        },



      },


      tabPosition: 'right',

      linkArr: [],
      tools: tools,
      status_ShowId_show: false,
      commodityM_P_show: false,
      commodityM_P_legend: {},
      commodityM_P_series: {
        data:[],
        name: "月度商品占比",
        radius: [15, 95],
      },
      commodityM_P_color: ['#8d67af', '#0186ff', '#61c5f9', '#38cb8e', '#fa535f', '#fe9e74', '#899caf', '#303133'],
      commodityY_show: false,
      commodityY_P_legend: {},
      commodityY_P_series: {
        data:[],
        name: "年度商品占比",
        radius: [15, 95],
      },
      commodityY_P_color: ['#8d67af', '#0186ff', '#61c5f9', '#38cb8e', '#fa535f', '#fe9e74', '#899caf', '#303133'],

      batchM_P_show: false,
      batchM_P_legend: {},
      batchM_P_series: {
        data:[],
        name: "月入库批次占比",
        radius: [15, 95],
      },
      batchM_P_color: ['#8d67af', '#0186ff', '#61c5f9', '#38cb8e', '#fa535f', '#fe9e74', '#899caf', '#303133'],

      batchY_P_show: false,
      batchY_P_legend: {},
      batchY_P_series: {
        data:[],
        name: "年度入库批次占比",
        radius: [15, 95],
      },
      batchY_P_color: ['#8d67af', '#0186ff', '#61c5f9', '#38cb8e', '#fa535f', '#fe9e74', '#899caf', '#303133'],



      signfor_expressdelivery_P_show: false,
      signfor_expressdelivery_P_legend: {},
      signfor_expressdelivery_P_series: {
        data:[],
        name: "当月签收状态占比",
        radius: [15, 95],
      },
      signfor_expressdelivery_P_color: ['#8d67af', '#0186ff', '#61c5f9', '#38cb8e', '#fa535f', '#fe9e74', '#899caf', '#303133'],

      shipment_status_P_show: false,
      shipment_status_P_legend: {},
      shipment_status_P_series: {
        data:[],
        name: "当月发货状态占比",
        radius: [15, 95],
      },
      shipment_status_P_color: ['#8d67af', '#0186ff', '#61c5f9', '#38cb8e', '#fa535f', '#fe9e74', '#899caf', '#303133'],

      amountofmoneylineM_P_show: false,
      amountofmoneylineM_P_legend: {},
      amountofmoneylineM_P_series: {
        data:[],
        name: "月度客户消费占比",
        radius: [15, 95],
      },
      amountofmoneylineM_P_color: ['#8d67af', '#0186ff', '#61c5f9', '#38cb8e', '#fa535f', '#fe9e74', '#899caf', '#303133'],


      amountofmoneylineY_P_show: false,
      amountofmoneylineY_P_legend: {},
      amountofmoneylineY_P_series: {
        data:[],
        name: "年度客户消费占比",
        radius: [15, 95],
      },
      amountofmoneylineY_P_color: ['#8d67af', '#0186ff', '#61c5f9', '#38cb8e', '#fa535f', '#fe9e74', '#899caf', '#303133'],



      //批号本年
      status_year_P_series: {
        data:[],
        name: "本年批次占比",
        radius: [15, 95],
      },
      //商品ID 本月
      commodity_month_P_series: {
        data:[],
        name: "本月商品占比",
        radius: [15, 95],
      },
      //商品ID 本年
      commodity_year_P_series: {
        data:[],
        name: "本年商品占比",
        radius: [15, 95],
      },
      status_Batch_P_legend:{},
      //金额饼状图
      Statistics_P_series: {
        data:[],
        name: "金额占比",
        radius: [15, 95],
      },


      status_Batch_P_color: ['#8d67af', '#0186ff', '#61c5f9', '#38cb8e', '#fa535f', '#fe9e74', '#899caf', '#303133'],


      contractType: false,//false = 日查询 月查询 [用量]
      cardFlowList: [],//数据排行
      contractArr: {},//折线图
      contract_show: false,
      contract_ShowLable: {},//折线图 key 对应显示 lable
      contract_xAxis: [],//折线图 X 轴显示
      contract_colorArr: ['#3c97fd', '#67c23a'],//折线图 颜色
      contract_config: {},//折线图 基础配置


      warehousinglineArr: {},//折线图
      warehousingline_show: false,
      warehousingline_ShowLable: {},//折线图 key 对应显示 lable
      warehousingline_xAxis: [],//折线图 X 轴显示
      warehousingline_colorArr: ['#3c97fd', '#67c23a'],//折线图 颜色
      warehousingline_config: {},//折线图 基础配置


    };


  },
  watch: {

  },
  mounted() {

  },
  methods: {

    //快捷入口是否显示
    quickEntry() {
      this.quickEntryShow = !this.quickEntryShow;
    },

    goTarget(href) {
      window.open(href, "_blank");
    },
    handleClick(tab, event) {
    // console.log(tab, event);

    },


    //
    changecontractType() {

      // if (this.indexpage.businessVolumeFlow.Day_contract_xAxis != null && this.indexpage.businessVolumeFlow.Day_contract_xAxis.length > 0) {
      //   if (this.contractType == true) {
      //     this.contractArr = this.indexpage.businessVolumeFlow.Month_contractMap;
      //     this.contract_xAxis = this.indexpage.businessVolumeFlow.Month_contract_xAxis;
      //     this.cardFlowList = this.indexpage.businessVolumeFlow.Month_cardFlowList;
      //     this.contract_colorArr = ['#67c23a'];
      //   } else {
      //     this.contractArr = this.indexpage.businessVolumeFlow.Day_contractMap;
      //     this.contract_xAxis = this.indexpage.businessVolumeFlow.Day_contract_xAxis;
      //     this.cardFlowList = this.indexpage.businessVolumeFlow.Day_cardFlowList;
      //     this.contract_colorArr = ['#3c97fd'];
      //   }
      //   this.contract_show = true;
      // } else {
      //
      // }
    },

    /**金额饼状图 控制 月 年*/
    changeMoney(){

    },
    /**金额折线图 控制 月 年*/
    changeContractChart(){

      if(this.assetsIndex.contractY.xAxis!=null &&  this.assetsIndex.contractY.xAxis.length>0){
        if(this.contractType==true){
          this.contractArr = this.indexpage.contractM.mapObj;
          this.contract_xAxis = this.indexpage.contractM.xAxis;
          this.contract_colorArr = ['#67c23a'];
        }else {
          this.contractArr = this.indexpage.contractY.mapObj;
          this.contract_xAxis = this.indexpage.contractY.xAxis;
          this.contract_colorArr = ['#3c97fd'];
        }
        this.contract_show = true;
      }


    },
    /**入库商品饼状图 控制 月 年*/
    changeWarehousing(){

    },
    /**入库商品折线图 控制 月 年*/
    changeWarehousingChart(){

    },


    handleSetLineChartData(type) {

    },


    loadIndex(){
      //console.log(this.allowloading)
      if(this.allowloading) {

        let Pwd_Str = tools.encrypt(JSON.stringify({}));
        AssetDetails(Pwd_Str).then(response => {
          this.allowloading = false;//禁止重复多次加载
          let jsonobj = JSON.parse(tools.Decrypt(response));
           console.log(jsonobj);
          if (jsonobj.code == 200) {
            let data = jsonobj.Data.data;
            if (data != null && data != undefined) {
              this.assetsIndex = data;
              this.assetsIndex.batchM = data.batchM != null?JSON.parse(data.batchM):[];//本月批号占比
              this.assetsIndex.batchY = data.batchY != null?JSON.parse(data.batchY):[];//本年批号占比
              this.assetsIndex.commodityM = data.commodityM != null && data.commodityM != ''?JSON.parse(data.commodityM):[];//本月商品占比
              this.assetsIndex.commodityY = data.commodityY != null?JSON.parse(data.commodityY):[];//本年商品占比
              this.assetsIndex.contractM = data.contractM != null && data.contractM != ''?JSON.parse(data.contractM):[];//本月合同金额折线图
              this.assetsIndex.contractY = data.contractY != null?JSON.parse(data.contractY):[];//本年合同金额折线图
              this.assetsIndex.signfor_expressdelivery = data.signfor_expressdelivery != null?JSON.parse(data.signfor_expressdelivery):[];//快递签收状态
              this.assetsIndex.express_evaluation = data.express_evaluation != null?JSON.parse(data.express_evaluation):[];//快递评价
              this.assetsIndex.shipment_status = data.shipment_status != null?JSON.parse(data.shipment_status):[];//发货状态
              this.assetsIndex.amountofmoneylineM = data.amountofmoneylineM != null?JSON.parse(data.amountofmoneylineM):[];//本月合同金额饼装图-客户分类
              this.assetsIndex.amountofmoneylineY = data.amountofmoneylineY != null?JSON.parse(data.amountofmoneylineY):[];//本年合同金额饼装图-客户分类
              this.assetsIndex.warehousinglineM = data.warehousinglineM != null&& data.warehousinglineM != ''?JSON.parse(data.warehousinglineM):[];//本月入库商品折线图
              this.assetsIndex.warehousinglineY = data.warehousinglineY != null&& data.warehousinglineY != ''?JSON.parse(data.warehousinglineY):[];//本年入库商品折线图


              // if (data.requestMap != null) {
              //   let requestMap = JSON.parse(data.requestMap);
              //   this.assetsIndex.requestMap = requestMap;
              // }
              // console.log( this.indexpage.requestMap)
              window['IoTLink-assetsData'] = this.assetsIndex;
              this.Myload();
            }

            this.msgSuccess(jsonobj.Data.Message);
          } else {
            let msg = jsonobj.Data != null && jsonobj.Data != '' && jsonobj.Data.Message != null && jsonobj.Data.Message != '' ? jsonobj.Data.Message : jsonobj.msg;
            this.msgError(msg);
          }
          if (jsonobj.deptId == '100'){
            this.loadingOnelinCount = false;//加载 在线用户
          }
          let _this = this;
          setTimeout(function () {
            _this.allowloading = true;
            //console.log("setAllowloading")
          }, 30000);
        })

      }else{
        this.msgError("请30S后再请求刷新！");
      }
    },


    Myload() {

      //月度商品占比
      if(this.assetsIndex.commodityM!=null &&  this.assetsIndex.commodityM.length>0){
        this.commodityM_P_series.data = this.assetsIndex.commodityM;
        this.activeName = "voice";
        this.commodityM_P_show = true;
      }
      //年度商品占比
      if(this.assetsIndex.commodityY!=null &&  this.assetsIndex.commodityY.length>0){
        this.commodityY_P_series.data = this.assetsIndex.commodityY;
        this.commodityY_P_show = true;
      }

      //本月批号占比
      if(this.assetsIndex.batchM!=null &&  this.assetsIndex.batchM.length>0){
        this.batchM_P_series.data = this.assetsIndex.batchM;
        this.batchM_P_show = true;
      }
      //本年批号占比
      if(this.assetsIndex.batchY!=null &&  this.assetsIndex.batchY.length>0){
        this.batchY_P_series.data = this.assetsIndex.batchY;
        this.activeName = "ShortMessage";
        this.batchY_P_show = true;
      }
      //本月合同金额折线图
      if(this.assetsIndex.contractM!=null &&  this.assetsIndex.contractM.length>0){
        this.contractArr = this.indexpage.contractM.mapObj;
        this.contract_xAxis = this.indexpage.contractM.xAxis;
        this.contract_colorArr = ['#67c23a'];
        this.contract_show = true;
      }
      //本年合同金额折线图
      if(this.assetsIndex.contractY!=null &&  this.assetsIndex.contractY.length>0){
        this.contractArr = this.indexpage.contractY.mapObj;
        this.contract_xAxis = this.indexpage.contractY.xAxis;
        this.contract_colorArr = ['#3c97fd'];
        this.contract_show = true;
      }
      //当月签收状态占比
      if(this.assetsIndex.signfor_expressdelivery!=null &&  this.assetsIndex.signfor_expressdelivery.length>0){
        this.signfor_expressdelivery_P_series.data = this.assetsIndex.signfor_expressdelivery;
        this.signfor_expressdelivery_P_show = true;
      }
      //当月发货状态占比
      if(this.assetsIndex.shipment_status!=null &&  this.assetsIndex.shipment_status.length>0){
        this.shipment_status_P_series.data = this.assetsIndex.shipment_status;
        this.activeName = "expressMoney";
        this.shipment_status_P_show = true;
      }
      //本月合同金额饼装图-客户分类
      if(this.assetsIndex.amountofmoneylineM!=null &&  this.assetsIndex.amountofmoneylineM.length>0){
        this.amountofmoneylineM_P_series.data = this.assetsIndex.amountofmoneylineM;
        this.amountofmoneylineM_P_show = true;
      }
      //本月合同金额饼装图-客户分类
      if(this.assetsIndex.amountofmoneylineY!=null &&  this.assetsIndex.amountofmoneylineY.length>0){
        this.amountofmoneylineY_P_series.data = this.assetsIndex.amountofmoneylineY;
        this.amountofmoneylineY_P_show = true;
        this.activeName = "sumOfMoney";
        //console.log(this.amountofmoneylineY_P_show)
      }
     //本月入库商品折线图
      if(this.assetsIndex.warehousinglineM!=null &&  this.assetsIndex.warehousinglineM.length>0){

        this.warehousinglineArr = this.indexpage.warehousinglineM.mapObj;
        this.warehousingline_xAxis = this.indexpage.warehousinglineM.xAxis;
        this.warehousingline_colorArr = ['#67c23a'];
        this.warehousingline_show = true;
        this.activeName = "Warehousing";


      }
      //本年入库商品折线图
      if(this.assetsIndex.warehousinglineY!=null &&  this.assetsIndex.warehousinglineY.length>0){
        this.warehousinglineArr = this.indexpage.warehousinglineY.mapObj;
        this.warehousingline_xAxis = this.indexpage.warehousinglineY.xAxis;
        this.warehousingline_colorArr = ['#3c97fd'];
        this.warehousingline_show = true;
        this.activeName = "Warehousing";

      }



      this.status_ShowId_show = true;

    },

  },


};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    /*padding: 10px 20px;*/
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

  .app-container {
    padding: 8px !important;
  }

  .my-link-type {
    text-align: center;
  }

  .el-main {
    padding: 8px 10px !important;
  }

  aside {
    padding: 8px 10px !important;
  }

  .el-menu-item {
    padding: 0px !important;
    font-size: 16px;
  }

  .el-menu {
    border-right: solid 0px #e6e6e6;
  }

  .right_5 {
    margin-right: 5px;
  }

  .el-divider--horizontal {
    margin: 8px 0 !important;
  }


}


.el-card__body {
  padding: 0px 10px 0px 10px !important;
}

.My_tooltip {
  color: #fd883c;
}

.My_tooltip_46a6ff {
  color: #46a6ff;
}

.el-card__header {
  padding: 10px 19px !important;
}
</style>


<style lang="scss" scoped>
.panel-group {
  /*margin-top: 18px;*/

  .card-panel-col {
    /* margin-bottom: 32px;*/
  }

  .card-panel {
    height: 70px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-simCard {
        background: #40c9c6;
      }

      .icon-upwardTrend {
        background: #36a3f7;
      }

      .icon-used {
        background: #f4516c;
      }

      .icon-Proportion {
        background: #1682e6
      }
    }

    .icon-simCard {
      color: #40c9c6;
    }

    .icon-upwardTrend {
      color: #36a3f7;
    }

    .icon-used {
      color: #f4516c;
    }

    .icon-Proportion {
      color: #1682e6
    }

    .card-panel-icon-wrapper {
      float: left;
      /* margin: 14px 0 0 14px;*/
      padding: 10px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
      margin-right: 5px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      /* float: right;*/
      font-weight: bold;
      margin: 10px;
      margin-left: 5px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 13px;
        margin-bottom: 12px;
      }

      .card-panel-text-font {
        font-weight: 700;
        font-size: 1.24rem;
        color: #3b4e66;
        margin-right: 0.1rem;
      }

      .card-panel-num {
        font-size: 18px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}


</style>


<style lang="scss" scoped>
.my_panel-group {
  /*margin-top: 18px;*/

  .card-panel-col {
    /* margin-bottom: 32px;*/
  }

  .card-panel {
    /*height: 70px;*/
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-simCard {
        background: #40c9c6;
      }

      .icon-upwardTrend {
        background: #36a3f7;
      }

      .icon-used {
        background: #f4516c;
      }

      .icon-Proportion {
        background: #1682e6
      }
    }

    .icon-simCard {
      color: #40c9c6;
    }

    .icon-upwardTrend {
      color: #36a3f7;
    }

    .icon-used {
      color: #f4516c;
    }

    .icon-Proportion {
      color: #1682e6
    }

    .card-panel-icon-wrapper {
      float: left;
      /* margin: 14px 0 0 14px;*/
      padding: 10px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
      margin-right: 5px;
    }

    .card-panel-icon {
      float: left;
      font-size: 40px;
    }

    .card-panel-description {
      /* float: right;*/
      font-weight: bold;
      margin: 5px;
      margin-left: 2.5px;

      .card-panel-text {
        line-height: 24px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 13px;
        /*margin-bottom: 12px;*/
      }

      .card-panel-text-font {
        font-weight: 700;
        font-size: 1.24rem;
        color: #3b4e66;
        margin-right: 0.1rem;
      }

      .card-panel-num {
        font-size: 18px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}

</style>

<style>


</style>

<style>
body {
  background-color: rgb(255 255 255 / 50%);
}
</style>
